<template>
    <div class="weather-body">
      <div class="content-title">近期天气</div>
      <div class="content-detail">
        <div class="detail-body" v-if="weatherData && weatherData.length > 0">
          <div v-for="(item, index) in weatherData" :key="item.date">
            <div>{{ setDate(item, index) }}</div>
            <div>{{ item.date.slice(5, 10) }}</div>
            <div>{{ item.dayweather }}</div>
            <div>风力{{ item.daypower }}级</div>
          </div>
        </div>
        <div class="detail-body" v-else>
          <div>正在加载天气数据...</div>
        </div>
        <div class="detail-chart">
          <v-chart :option="option"></v-chart>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from "vue";
  
  const props = defineProps({
    weatherData: {
      type: Array,
      required: true,
    },
  });
  const setDate = (item, index) => {
    const week = ["日", "一", "二", "三", "四", "五", "六"];
    switch (index) {
      case 0:
        return "今天";
      case 1:
        return "明天";
      default:
        return `星期${week[new Date(item.date).getDay()]}`;
    }
  };
  const setOptions = (data) => {
    if (!data || !Array.isArray(data) || data.length === 0) {
      return;
    }
    
    const xData = data.map((item) => {
      return item.date ? item.date.slice(5, 10) : '';
    });
    
    const dayData = data.map((item) => {
      return item.daytemp_float !== undefined ? Number(item.daytemp_float) : 0;
    });
    
    const nightData = data.map((item) => {
      return item.nighttemp_float !== undefined ? Number(item.nighttemp_float) : 0;
    });
    
    // 确保option.value已经初始化且包含必要的属性
    if (!option.value) {
      renderChart();
    }
    
    if (option.value && option.value.xAxis) {
      option.value.xAxis.data = xData;
    }
    
    if (option.value && option.value.series && option.value.series.length >= 2) {
      option.value.series[0].data = dayData;
      option.value.series[1].data = nightData;
    }
  };
  
  const option = ref({});
  
  const renderChart = () => {
    option.value = {
      grid: {
        left: 0,
        right: 0,
        bottom: '25%',
        top: '25%',
      },
      xAxis: {
        type: "category",
        show: false,
        data: [],
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          data: [],
          type: "line",
          smooth: true,
          label: {
            show: true,
            position: "top",
            color: "#fff",
            formatter: function (params) {
              return "白" + params.value + "℃";
            },
          },
        },
        {
          data: [],
          type: "line",
          smooth: true,
          label: {
            show: true,
            position: "bottom",
            color: "#fff",
            formatter: function (params) {
              return "晚" + params.value + "℃";
            },
          },
        },
      ],
    };
  };
  
  // 先初始化图表
  renderChart();
  
  // 然后监听数据变化
  watch(
    () => props.weatherData,
    (newVal) => {
      if (newVal && newVal.length > 0) {
        setOptions(newVal);
      }
    },
    { deep: true, immediate: true }
  );
  
  onMounted(() => {
    // 确保组件挂载后图表已经初始化
    if (props.weatherData && props.weatherData.length > 0) {
      setOptions(props.weatherData);
    }
  });
  </script>
  
  <style lang="scss" scoped>
  .weather-body {
    padding: 0 20%;
    padding-bottom: 50px;
    .content-title {
      color: white;
      margin-bottom: 15px;
    }
    .content-detail {
      background-color: rgb(0, 78, 113);
      color: white;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      .detail-body {
          text-align: center;
          display: flex;
          justify-content: space-around;
          margin-bottom: 25px;
          div{
              margin: 20px 0;
              font-size: 16px;
          }
      }
      .detail-chart{
          height: 200px;
      }
    }
  }
  </style>
  